<template>
	<view class="all">
		<!-- 占位 -->
		<view style="height: 1rpx;"></view>
		<view class="hearder-cont">
			<view class="hearder1">
				<view style="width: 20rpx;"></view>
				<image src="../../static/icon/back1.png" @click="back"></image>
				<text @click="back">返回</text>
			</view>
			<view class="hearder2">
				<text>{{title}}</text>
			</view>
			<view class="hearder3">
				<text @click="info">我的</text>
			</view>
		</view>
		<view class="navBar">
			<view class="bar" :class="activ==index?'activBar':''" v-for="(item,index) in barList" @click="activBar(index)">{{item}}</view>
		</view>
		<!-- 订单 -->
		<view class="shop-list" v-for="item in orderList">
			<view class="hearder-store" v-if="item.store!=null">
				<view class="store">{{item.store}}</view>
				<view style="width: 30%;text-align: center; color: #E74C3C;" v-if="item.status==0">待发货</view>
				<view style="width: 30%;text-align: center; color: #5DADE2;" v-if="item.status==1">系统已发货</view>
				<view style="width: 30%;text-align: center; color: #58D68D;" v-if="item.status==2">已签收</view>
				<view style="width: 30%;text-align: center; color: #8E44AD;" v-if="item.status==3">正在退货</view>
				<view style="width: 30%;text-align: center; color: #E74C3C;" v-if="item.status==4">退单失败</view>
				<view style="width: 30%;text-align: center; color: #99A3A4;" v-if="item.status==5">已退订</view>
				
			</view>
			<view class="hearder-store" v-if="item.store==null">
				<view class="store">商城制造</view>
				<view style="width: 30%;text-align: center; color: #E74C3C;" v-if="item.status==0">待发货</view>
				<view style="width: 30%;text-align: center; color: #5DADE2;" v-if="item.status==1">系统已发货</view>
				<view style="width: 30%;text-align: center; color: #58D68D;" v-if="item.status==2">已签收</view>
				<view style="width: 30%;text-align: center; color: #8E44AD;" v-if="item.status==3">正在退货</view>
				<view style="width: 30%;text-align: center; color: #E74C3C;" v-if="item.status==4">退单失败</view>
				<view style="width: 30%;text-align: center; color: #99A3A4;" v-if="item.status==5">已退订</view>
			</view>
			
			<view class="shop-cont">
				<view class="shop-image">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shop-param">
					<view class="item1">{{item.name}}</view>
					<view class="item2"><text v-if="item.style!=null">{{item.style}}</text>-<text v-if="item.size!=null">{{item.size}}</text></view>
				</view>
				<view class="price-num">
					<view></view>
					<view><text style="color: #EC7063;font-size: 24rpx;">￥</text><text style="color: #CB4335;">{{item.price}}</text></view>
					<view style="margin-top: 10rpx;font-size: 24rpx;color: #99A3A4;">x{{item.num}}</view>
				</view>
			</view>
			<view class="shop-item1">
				<view class="shop-item2">
					<view style="width: 30rpx;height: 70rpx;"></view>
					<text v-if="item.remark!=null"> {{item.remark}}</text>
				</view>
				<view class="shop-item3">
					<text style="color: #2874A6;" v-if="item.status==1">确定收货</text>
					<view style="width: 30rpx;"></view>
					<view style="width: 100rpx;" v-if="item.status!=1"></view>
					<text @click="openOutGoodsDialog(item)" v-if="![3,4,5].includes(item.status)">退货</text>
				</view>
			</view>
		</view>
		<view>
			<uni-popup ref="outDialog" type="dialog">
				<view class="dialog">
					<view style="height: 20rpx;"></view>
					<view class="shop-list" style="height: 300rpx;">
						<view class="hearder-store" v-if="outGoodsForm.store!=null">
							<view class="store">{{outGoodsForm.store}}</view>
						</view>
						<view class="hearder-store" v-if="outGoodsForm.store==null">
							<view class="store">商城制造</view>
						</view>
						
						<view class="shop-cont">
							<view class="shop-image">
								<image :src="outGoodsForm.image" mode=""></image>
							</view>
							<view class="shop-param">
								<view class="item1">{{outGoodsForm.name}}</view>
								<view class="item2"><text v-if="outGoodsForm.style!=null">{{outGoodsForm.style}}</text>-<text v-if="outGoodsForm.size!=null">{{outGoodsForm.size}}</text></view>
							</view>
							<view class="price-num">
								<view></view>
								<view><text style="color: #EC7063;font-size: 24rpx;">￥</text><text style="color: #CB4335;">{{outGoodsForm.price}}</text></view>
								<view style="margin-top: 10rpx;font-size: 24rpx;color: #99A3A4;">x{{outGoodsForm.num}}</view>
							</view>
						</view>
					</view>
					<view class="reasonText" v-if="reasonText!=null">
						{{reasonText}}
					</view>
					<view class="reason">
					<uni-collapse @change="openreasonstatus" >
						<uni-collapse-item title="请选择退货理由" :open="openreason">
								<view v-for="(item,index) in reason" class="choosereason" @click="choosereason(item,)">{{item}}</view>
						</uni-collapse-item>
					</uni-collapse>
					</view>
					<!-- 补充说明，使用文本域 -->
					<view class="reasontextarea">
						<view style="margin: 15rpx;">补充说明:</view>
						<textarea placeholder="请输入退货原因.." v-model="explanation"></textarea>
					</view>
					<view style="height: 200rpx;"></view>
					<view class="bottot-season">
						<view @click="openseasondialog">提交申请</view>
					</view>
					
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="dialog" type="dialog" is-mask-click="false" >
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="提交" title="通知" :content="contentText" @confirm="submitForm" before-close="true"
					@close="closedialog"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000" style="text-align: center;"></uni-popup-message>
			</uni-popup>
		</view>
		<!-- 占位 -->
		<view style="height: 1400rpx;"></view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import http from "../../util/httpRequest.js"
	export default{
		data(){
			return{
				// activ:0,
				barList:["全部","代发货","代收货","退订","历史订单"], //0,1,2,3
				orderList:[],
				title:null,
				outGoodsForm:null,
				reason:["7天无理由","大小/尺寸与商品描述不符","颜色/图案/款式与商品描述不符","材质与商品描述不符","做工瑕疵问题","商品有气味问题","冒牌假货","商城未按时发货","拍错了"],
				openreason: false,
				reasonText:null,
				contentText:null,
				explanation:null,
				msgType:null,
				messageText:null
				
			}
		},
		computed:{
			activ(){
				return store.state.common.activ
			},
			loginInfo(){
				return store.state.common.loginInfo
				// return "fsdsa"
			}
		},
		methods:{
			activBar(index){
				var that = this
				store.commit("activ",index)
				this.changTitle()
				that.getOrder()
			},
			getOrder(){
				var that = this
				that.orderList = []
				uni.request({
					url:http.orderUrl+"order/list",
					method:"POST",
					data:{
						typeId:that.activ,
						userId:that.loginInfo.userId
						// userId:3
					},
					success(res) {
						// console.log(res.data.data)
						that.orderList = res.data.data
					}
					
				})
			},
			changTitle(){
				this.title = this.barList[this.activ]
			},
			back(){
				uni.reLaunch({
					url: store.state.common.router
				})
			},
			info(){
				uni.reLaunch({
					url: "/pages/info/info"
				})
			},
			outGoods(item){
				console.log(item)
				uni.request({
					url:http.orderUrl+"order/outgoods",
					method:"POST",
					data:{
						orderId:item.orderId
					},
					success(res) {
						console.log(res)
					}
				})
			},
			openOutGoodsDialog(item){
				this.outGoodsForm = item
				this.$refs.outDialog.open()
			},
			closeOutGoodsDialog(){
				this.outGoodsForm = null
				this.$refs.outDialog.close()
			},
			choosereason(item){
				 this.reasonText = item
				 this.openreason=false
			},
			openreasonstatus(){
				this.openreason=true
				// console.log("测试",this.openreason)
				
			},
			openseasondialog(){
				if(this.reasonText==null){
					this.contentText="请选择退货理由"
				}
				if(this.reasonText!=null){
					this.contentText="你的退货原因是:"+this.reasonText
				}
				this.$refs.dialog.open()
			},
			closedialog(){
				console.log("关闭")
				this.$refs.dialog.close()
			},
			submitForm(){
				var that = this
				if(that.reasonText!=null){
					uni.request({
						url:http.orderUrl+"order/outgoods",
						method:"POST",
						data:{
							orderId:that.outGoodsForm.orderId,
							remark:that.reasonText,
							explanation:that.explanation
						},
						success(res) {
							if(res.data.code==0){
								console.log(res.data)
								that.msgType = "success"
								that.messageText = res.data.msg
								that.$refs.dialog.close()
								that.$refs.outDialog.close()
								that.$refs.message.open()
								that.getOrder()
							}
						}
					})
				}else{
					that.contentText = "你还没有选择退货理由"
				}
				
			}
			
			
			
		},
		created() {
			this.getOrder()
			this.changTitle()
		}
	}
</script>

<style scoped>
	.all{
		width: 100%;
		background-color: #E9E8E6;
	}
	.hearder-cont{
		display: flex;
		margin: 0 auto;
		width: 100%;
		height: 100rpx;
		/* border-radius: 10rpx; */
		background-color: #FFFFFF;
	}
	.hearder1{
		display: flex;
		width: 25%;
		height: 100rpx;
		line-height: 100rpx;
		/* background-color: #58D68D; */
		
	}
	.hearder1>image{
		margin-top: 30rpx;
		width: 45rpx;
		height: 45rpx;
	}
	.hearder2{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		/* background-color: #F7DC6F; */
	}
	.hearder3{
		width: 25%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		
		/* background-color: #8E44AD; */
	}
	.navBar{
		display: flex;
		margin: 15rpx auto;
		width: 95%;
		height: 100rpx;
		
	}
	.navBar>view{
		margin-left: 1%;
		width: 18%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.activBar{
		color: #2ecc71;
	}
	.shop-list{
		margin: 20rpx auto;
		width: 95%;
		height: 350rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.hearder-store{
		display: flex;
		margin: 0 auto;
		width: 90%;
		height: 60rpx;
		line-height: 60rpx;
		
	}
	.store{
		display:-webkit-box;
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: 600;
		-webkit-line-clamp:1;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
		/* background-color: #007AFF */
	}
	.shop-cont{
		display: flex;
		margin:0 auto;
		width: 90%;
		height: 200rpx;
		/* background-color: #007AFF */
		
	}
	.shop-image{
		margin-top: 20rpx;
		width: 150rpx;
		height: 160rpx;
		border-radius: 25rpx;
		
		
	}
	.shop-image>image{
		
		width: 150rpx;
		height: 160rpx;
		border-radius: 25rpx;
	}
	.shop-param{
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: 330rpx;
		height: 160rpx;
		/* background-color: #F4D03F; */
	}
	.price-num{
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: 120rpx;
		height: 160rpx;
		/* background-color: #1ABC9C; */
	}
	.item1{
		height: 50rpx;
		line-height: 50rpx;
		/* background-color: #007AFF; */
		font-size: 27rpx;
		display:-webkit-box;
		-webkit-line-clamp:1;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
	}
	.item2{
		font-size: 24rpx;
		display:-webkit-box;
		-webkit-line-clamp:3;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
		color: #B2BABB;
	}
	.shop-item1{
		display: flex;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		/* background-color: #007AFF; */
	}
	.shop-item2{
		display: flex;
		width: 60%;
		height: 70rpx;
		color: #E74C3C;
		font-size: 23rpx;
		/* background-color: #09BB07; */
	}
	.shop-item3{
		display: flex;
		width: 40%;
		height: 70rpx;
		text-align: center;
		color: #DC7633;
		/* background-color: #F1C40F; */
	}
	.dialog{
		width: 700rpx;
		/* height: 700rpx; */
		max-height: 1000rpx;
		overflow-y: auto;
		flex-flow: wrap;
		border-radius: 15rpx;
		background-color: #F4ECF7;
	}
	.reason{
		margin: 10rpx auto;
		width: 90%;
		border-radius: 15rpx;
	}
	.choosereason{
		height: 50rpx;
		text-align: center;
	}
	.choosereason:active{
		color: #09BB07;
	}
	.reasonText{
		margin: 10rpx auto;
		width: 90%;
		color: #EC7063;
	}
	.reasontextarea{
		margin: 10rpx auto;
		width: 90%;
	}
	.reasontextarea>textarea{
		width: 100%;
		border: 1rpx solid #007AFF;
	}
	.bottot-season{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		/* background-color: #007AFF; */
	}
	.bottot-season>view{
		margin: 0 auto;
		width: 50%;
		height: 100rpx;
		font-size: 40rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 30rpx;
		color: #FFFFFF;
		background-color: #09BB07;
	}
</style>
